Skip to main content

MultiSelect

Properties​

Choices​

Choices to display in the dropdown. This is an array, with each entry corresponding to a row in the dropdown. Each entry can either be:

  • A string
  • An object of the form: { id: string, label: string, group: string }. In this form, the label is shown in the dropdown, but the id is used as the Selected Value if this row is selected. group is an optional string, and is used to place this entry into the group (see Enable grouping for more info)

Ex:

["Row 1", { "id": "Row 2", "label": "different-label" }, "Row 3"]

Selected Value​

The selected values of the dropdown. This will be an array of strings, with each corresponding to the string ID for the selected row. If this value is not linked to the store, you will not be able select a different row in the drop-down.

Label​

The label to display next to the dropdown

Label Style​

  • Left-aligned style

  • Inline style

If enabled, the user will be able to type into the MultiSelect component to filter the dropdown

Show Select All option​

If enabled, a Show Select All option will be displayed at the top of the drop-down

Enable grouping​

If enabled, each row in the drop-down will be grouped according to the group string in Choices. If no group string exists, in will be placed in Other

Choices:

[
  { "id": "A", "label": "A", "group": "Group 1" },
  { "id": "B", "label": "B", "group": "Group 1" },
  "C"
]

Use chip style​

If enabled, the selected items are displayed inside 'chips':

If disabled, the selected items are displayed as simple text:

Prefix label with group​

When Enable grouping is enabled, and Use chip style is enabled, and this property is enabled, the text displayed inside each chip will be prefixed with the group.

Max number of selected values to show​

Max number of selected values to show before hiding the rest and showing an ellipses.

For example, when set to 2:

Allow multi-line Chips​

Allow text in Chips to wrap over to the next line. If disabled, the text is truncated with an ellipsis. Ignored if Use chip style is disabled

Icon when collapsed​

The icon to use for the collapsed view of this component. For example, when used in the left-hand side of the Collapsible Three Panel Layout

Adaptors​

Table to sorted unique list​

This adaptor transforms an Self Describing Data (SDD) table into data for this component. In this adaptor, each row in the SDD table will correspond to one row in the drop-down (if no filters are being used).

Table Data​

This property should be linked to the SDD table.

ID Column​

This property should be linked to a string, which is the name of a column in the SDD Table. This column will then be used to source the id of each row in the drop-down.

Label Column​

This property should be linked to a string, which is the name of a column in the SDD Table. This column will then be used to source the label of each row in the drop-down.

Group By Column​

This property should be linked to a string, which is the name of a column in the SDD Table. This column will then be used to source the group of each row in the drop-down.

Filters​

The applicable/available filters in this adaptor are more similar to those found elsewhere in Dais:

  • Available Filters may be linked to an object that maps filter names to filter specification objects. These objects contain key, a value and a filter method.
  • Applicable Filters are a list of filter names in the object supplied to Available Filters to apply.

The supported values that can be provided to method are:

  • "equal"
  • "contains"
  • "between"
  • "lt"
  • "gt"
  • "lte"
  • "gte"

An example configuration could be:

{
  "ApplicableFilters": ["MyFilter", "MyOtherFilter"],
  "AvailableFilters": {
    "MyFilter": {
      "key": "y",
      "value": 50,
      "method": "gte"
    },
    "MyOtherFilter": {
      "key": "value",
      "value": [90, 180],
      "method": "between"
    }
  }
}